<template>
  <div class="home-box">
    <!-- 面包屑-->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>企业门户管理系统</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
    </el-breadcrumb>
    <!--卡片 -->
    <el-card shadow="never">
      <el-avatar :size="50" :src="state.circleUrl" />
      <h3>{{ welcomeTxt }}, 您辛苦了</h3>
    </el-card>
    <!-- 轮播图 -->
    <el-carousel indicator-position="outside">
      <el-carousel-item v-for="item in 4" :key="item">
        <h3 text="2xl" justify="center">{{ item }}</h3>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from "vue";
import LocalCache from "@/utils/cache";
import UserManage from "@/http/api/UserManage";
// 头像路径
const state = reactive({
  circleUrl:
    "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
});
// 欢迎语
let welcomeTxt = computed(() => {
  let h = new Date().getHours();
  let { username } = LocalCache.getStorage("userInfo");
  if (h < 12) {
    return `上午好 ${username}`;
  } else {
    return `下午好 ${username}`;
  }
});
</script>

<style lang="scss" scoped>
.home-box {
  padding: 0 24px;
  padding-top: 12px;
}
//面包屑
::v-deep .el-breadcrumb {
  padding: 12px 0;
}
//卡片
.el-card__body {
  display: flex;
  align-items: center;

  h3 {
    margin-left: 12px;
  }
}
// 轮播图
.el-carousel {
  margin-top: 6px;
}
.el-carousel__item h3 {
  display: flex;
  color: #475669;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
